<template>
  <van-popup v-model="formObj.show" :close-on-click-overlay="false" @click-overlay="canceloverlay">
   
    <div class="from">
      <div class="title">{{formObj.text}}</div>
      <div class="imgBox">
        <van-uploader v-model="fileList" :max-count="1"    />
      </div>
      <van-cell-group>
        <van-field label="品名" required v-model="params.kname" placeholder="请输入品名" />
        <van-field label="单位" v-model="params.unit" placeholder="请输入单位" />
        <van-field label="价格" v-model="params.price" placeholder="请输入价格" />
        <van-field label="数量" v-model="params.nums" placeholder="请输入数量" />
        <van-field style="height: auto!important;
    padding: 15px !important;"
          required
          v-model="params.content"
          label="留言"
          type="textarea"
          placeholder="请描述下产品的信息（200字以内）"
          rows="3"
          @input="descInput"
          maxlength="200"
        />
      </van-cell-group>
      <div class="btnBox">
        <div class="btn cancle" @click="cancel">取消</div>
        <div class="btn sure" @click="comfirm">提交</div>
      </div>
    </div>
  </van-popup>
</template>
<script type="text/ecmascript-6">
import { postsupplybuydata } from "../../api/replay";
 
export default {
  
  data() {
    return {
      formObj: this.$store.state.nocaches.replayformShow,
      fileList: [],
      isPost: false, //防止多次提交
      params: {
        type: "",
        content: "",
        kname: "",
        price: "",
        unit: "",
        nums: "",
        img: "",
        op: "add"
      }
    };
  },
  computed: {
    shows() {
      return this.$store.state.nocaches.replayformShow;
    }
  },
  watch: {
    shows(newsv, oldv) {
      this.formObj = newsv;
    }
  },
  methods: {
    
    descInput() {
      if (this.params.content.length >= 200) {
        this.$toast("最多填写200字");
        return false;
      }
    },
    comfirm() {
      if (!this.params.kname) {
        this.$toast("品名不可以为空");
        return false;
      }
      if (!this.params.content) {
        this.$toast("商品描述不可以为空");
        return false;
      }
      this.params.type = this.formObj.type;
      if (this.fileList.length > 0) {
        this.params.img = this.fileList[0].content;
      }
      if (this.isPost) {
        this.$toast("数据提交中");
        return false;
      }
      this.isPost = true;
      postsupplybuydata(this.params).then(res => {
        this.isPost = false;
        if (res.code == "0000") {
          this.$toast("发布成功");
          let obj = this.formObj;
          obj.show = false;
          this.$store.dispatch("acreplayformShow", obj);
          let query = { type: this.params.type };
          this.$router.push({ path: "qgList", query: query });
        } else {
          this.$toast(res.msg);
        }
      });
    },
    cancel() {
      let obj = this.formObj;
      obj.show = false;
      this.$store.dispatch("acreplayformShow", obj);
    },
    canceloverlay() {
      let obj = this.formObj;
      obj.show = false;
      this.$store.dispatch("acreplayformShow", obj);
    }
  }
};
</script>

<style scoped lang="less">
.van-popup {
  border-radius: 0.2rem;
  overflow: hidden;
}
.from {
  width: 7rem;
  padding: 0 0.1rem;
  .imgBox {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .sort-box {
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 0.3rem;
    .name {
      flex: none;
      width: 90px;
    }
    .sort-btn {
      width: 100%;
      flex: 1;
      display: flex;
      .btn {
        width: 40%;
        display: flex;
        align-items: center;
      }
      .van-switch {
        margin-left: 0.1rem;
      }
    }
  }
  .title {
    font-size: 0.4rem;
    font-weight: bolder;
    color: #e49829;
    line-height: 1.3rem;
    text-align: center;
  }
  .btnBox {
    width: 100%;
    height: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    .btn {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #e49829;
    }
    .cancle {
      color: #666666;
      border-right: 0.01rem solid #efefef;
    }
  }
}
.applyInput {
  padding: 10px 15px;
}
.numberV {
  width: 90px;
  display: inline-block;
}
</style>
